<template>
  <div style="display: flex; justify-content: center; align-items: center; overflow: hidden">
    <div style="flex: 1">
      <img src="../../../assets/register.png" width="100%">
    </div>
    <div style="flex: 1; display:flex; align-items: center; justify-content: center">
      <el-form :model="user" :rules="rules" ref="RegisterRef">
        <div style="font-size: 25px; font-weight: bold; text-align: center; margin-bottom: 20px">
          欢迎注册
        </div>
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入姓名"
                    v-model="user.name" style="width: 300px;">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" size="medium" placeholder="请输入密码"
                    v-model="user.password" style="width: 300px" show-password>
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input prefix-icon="el-icon-circle-check" size="medium" placeholder="请输入确认密码"
                    v-model="user.confirmPassword" style="width: 300px" show-password>
          </el-input>
        </el-form-item>
        <el-form-item prop="number">
          <el-input prefix-icon="el-icon-info" size="medium" placeholder="请输入手机号"
                    v-model="user.number" style="width: 300px">
          </el-input>
        </el-form-item>
        <el-form-item prop="address">
          <el-input prefix-icon="el-icon-info" size="medium" placeholder="请输入地址"
                    v-model="user.address" style="width: 300px;">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;" type="primary" @click="register">注 册</el-button>
        </el-form-item>
        <div style="display: flex;margin-top: -8px;">
          <div>已经有账号了？请 <span style="color: #59b7ee;cursor: pointer;"
                                     @click="$router.push(`/login`)">登录</span>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "RegisterView",

  data() {
    //自定义确认密码校验
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'));
      } else if (value !== this.user.password) {
        callback(new Error('密码不一致'));
      } else {
        callback();
      }
    };
    return {
      //用户相关信息
      user: {
        name: '',
        password: '',
        confirmPassword: '',
        number: '',
        address: ''
      },
      //表单校验规则
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          {validator: validatePassword, trigger: 'blur'}
        ],
        number: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度需为11个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入住址', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在1到20个字符', trigger: 'blur'}
        ]
      }
    }
  },

  methods: {
    //注册方法
    register() {
      //校验表单，如果规则通过则发送请求
      this.$refs['RegisterRef'].validate(valid => {
        //校验通过发送请求
        if (valid) {
          //封装数据对象
          const user = {
            name: this.user.name,
            password: this.user.password,
            number: this.user.number,
            address: this.user.address
          }
          //发送请求
          request.post('/user/admin/register', user).then(res => {
            console.log(res);
            if (res.data.code === 200) {
              //跳转到登录页
              this.$message.success(`注册成功`);
              this.$router.push(`/login`)
            } else {
              this.$message.error(res.data.msg);
            }
          })
        }
      })
    }
  },

  mounted() {
  }
}
</script>

<style>
body {
  margin: 0;
}
</style>